<template>
	<div id='Select'>
		<el-select 
			v-if='className'
			class='num_tags' 
			:no-data-text='noDataText' 
			:no-match-text='noMatchText' 
			:filterable='filterable'
			:size='selectSize'
			:clearable='selectClearable'
			:placeholder="placeHolder"
			@input='selectChange'
			@blur='selectBlur'
			@change='selectOnChange'
			@focus='selectFocus'
			:value="value" 
			:multiple='multiple'
			:disabled='disabled'
			:multiple-limit='multipleLimit'
			:collapse-tags='collapseTags'
			autocomplete='on'
			>
			<slot></slot>
		</el-select>
		<el-select 
			v-else
			:no-data-text='noDataText' 
			:no-match-text='noMatchText' 
			:filterable='filterable'
			:size='selectSize'
			:clearable='selectClearable'
			:placeholder="placeHolder"
			@input='selectChange'
			@blur='selectBlur'
			@change='selectOnChange'
			@focus='selectFocus'
			:value="value" 
			:multiple='multiple'
			:disabled='disabled'
			:multiple-limit='multipleLimit'
			:collapse-tags='collapseTags'
			autocomplete='on'
			>
			<slot></slot>
		</el-select>
	</div>
</template>

<script>
	export default {
		name: 'Select',
		props: {
			dataList: {
				default: function() {
					return []
				},
			},
			className:{
				default:''
			},
			noDataText:{
				default:'选项为空时自定义文字'
			},
			noMatchText:{
				default:'搜索选项为空时自定义文字'
			},
			value:{
				default:''
			},
			placeHolder: {
				default: '请选择'
			},
			filterable: {
				default: false,//是否可搜索
			},
			selectSize: {
				default: 'mini'//搜索框大小
			},
			selectClearable: {
				default: true,//是否可清除
			},
			multiple:{
				default:false,//是否多选
			},
			multipleLimit:{
				default:0,//最多选择好多条。0表示不限制
			},
			collapseTags:{
				default:false,//多选时是否将选中值按文字的形式展示	
			},
			
			disabled:{
				default:false,//是否禁用
			}

		},
		components: {

		},
		data() {
			return {

			}
		},
		created() {},
		watch: {

		},
		computed: {

		},
		mounted() {
			
		},
		methods: {
			selectBlur() {
				this.$emit('selectBlur')
			},
			selectChange(val) {
				this.$emit('update:value', val)
			},
			selectFocus(){
				this.$emit('selectFocus')
			},
			selectOnChange(){
				this.$emit('selectOnChange')
			}
		}
	}
</script>

<style lang="scss">
	@import './Select.scss';
</style>